<template>
  <el-card>
    <!-- 图表 -->
    <div style="height: 44vh">
      <div ref="chart" style="height:100%"></div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "leftBottom",
  data() {
    return {
      chartConfig: {}
    };
  },
  mounted() {
    // 绘制图表
    let myChart = this.$echarts.init(this.$refs["chart"]);
    this.API.getLineData().then(res => {
      let { countList, dateList } = res.data;
      let option = {
        title: {
          text: "月度新增残疾人趋势",
          left: "center",
          top: "10%",
          textStyle: {
            fontSize: 18
          }
        },
        grid: [
          {
            left: "10%",
            bottom: "20%",
            top: "25%",
            right: "10%"
          }
        ],
        xAxis: {
          type: "category",
          data: dateList,
          axisLabel: { interval: 0, rotate: 45 }
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: countList,
            type: "line",
            smooth: true,
            label: {
              show: true,
              position: "outside"
            }
          }
        ]
      };
      myChart.setOption(option);
    });
  }
};
</script>

<style scoped>
.el-card {
  font-size: 0.7vw;
}
/deep/ .el-card__body {
  padding: 10px;
}
</style>
